<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" href="./css/jquery.ui.all.css">
<script src="./js/jquery-1.6.2.js"></script>
<script src="./js/jquery.ui.core.js"></script>
<script src="./js/jquery.ui.widget.js"></script>
<script src="./js/jquery.ui.mouse.js"></script>
<script src="./js/jquery.ui.sortable.js"></script>
<script src="./js/jquery.cookies.2.2.0.js"></script>
<link rel="stylesheet" href="./css/demos.css">
<style>
.demo {
	float: left;
	width:96%;
	margin-bottom:10px;
	border: solid 1px red;
}

.column {
	float: left;
	border: solid 1px #adaada;
}

.w1 {
	width: 200px;
	margin-right: 15px;
	padding: 10px;
}

.w2 {
	width: 150px;
	margin-right: 15px;
	padding: 10px;
}

.w3 {
	width: 300px;
	padding: 10px;
}

.portlet {
	margin: 0 1em 1em 0;
}

.portlet-header {
	margin: 0.3em;
	padding-bottom: 4px;
	padding-left: 0.2em;
}

.portlet-header .ui-icon {
	float: right;
}

.portlet-content {
	padding: 0.4em;
}

.ui-sortable-placeholder {
	border: 1px dotted black;
	visibility: visible !important;
	height: 50px !important;
}

.ui-sortable-placeholder * {
	visibility: hidden;
}
</style>
<script>
	$(function() {
		if(!$.cookies.get('list')){
			$.cookies.set('list','column1:div1,div2,div3|column2:div4|column3:div5,div6');
		}
		var list = $.cookies.get('list'); //获取cookie里的list值
		var arrColumn = list.split('|');
		$.each(arrColumn, function(m, n) {
			var elemId = n.split(':')[0]; //容器ID
			var arrRow = n.split(':')[1] ? n.split(':')[1].split(',') : ""; //单个序列ID
			$.each(arrRow, function(m, n) {
				if (n) {//排除空值
					$("#" + elemId).append($("#"+n).attr('id', n))//把序列填加进容器
				}
			});
		})
		
		<!-- 下面的代码为移动且保存DIV -->
		$( ".column" ).sortable({
			connectWith: ".column",
			stop: saveLayout
		});

		$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
				.end()
			.find( ".portlet-content" );

		<!-- 点击最小化按钮隐藏div -->
		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
		});
		$( ".column" ).disableSelection();

		function saveLayout(){
			var list = "";
			$.each($(".column"),function(m){
				list += $(this).attr('id') + ":";
				$.each($(this).children(".portlet"),function(d){
					list += $(this).attr('id') + ",";
				})
				list += "|";
			})//对其进行处理，把每一列有的div的id分别储存起来。
			$.cookies.set('list',list);
		}
	});
	</script>
</head>
<body>
	<div class="demo">

		<div id="column1" class="column w1">
			<div id="div1" class="portlet">
				<div class="portlet-header">第一个DIV块</div>
				<div class="portlet-content">
					<ul>
						<li><span>第一个DIV块</span></li>
					 	<li><span>第一个DIV块</span></li>
					 	<li><span>第一个DIV块</span></li>
					 	<li><span>第一个DIV块</span></li>
					 </ul>
				</div>
			</div>
			<div id="div2" class="portlet">
				<div class="portlet-header">第二个DIV块</div>
				<div class="portlet-content">这里是第二个DIV块</div>
			</div>
		</div>

		<div id="column2" class="column w2">
			<div id="div3" class="portlet">
				<div class="portlet-header">第三个DIV块</div>
				<div class="portlet-content">这里是第三个DIV块</div>
			</div>
			<div id="div4" class="portlet">
				<div class="portlet-header">第四个DIV块</div>
				<div class="portlet-content">这里是第四个DIV块</div>
			</div>
		</div>

		<div id="column3" class="column w3">
			<div id="div5" class="portlet">
				<div class="portlet-header">第五个DIV块</div>
				<div class="portlet-content">这里是第五个DIV块</div>
			</div>
			<div id="div6" class="portlet">
				<div class="portlet-header">第六个DIV块</div>
				<div class="portlet-content">这里是第六个DIV块</div>
			</div>
		</div>

	</div>
	<div class="demo">
		<div id="column4" class="column w1">
		</div>
	</div>
</body>
</html>